<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>湖外湖点餐系统</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <meta name="description" content="Portfolio Zoom Slider with jQuery" />

        <meta name="keywords" content="jquery, plugin, slider, zoom, portfolio, cloud-zoom"/>

		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>

        <link rel="stylesheet" type="text/css" href="css/style.css" />

		<link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css" />

		<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />

		<script src="js/cufon-yui.js" type="text/javascript"></script>

		<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
		
 <style type="text/css">
    body{
		 
		margin: 0px;
		padding: 0px;
		font-size: 12px;
		font-family: Arial;
	 
      }
	  #container{
		width: 1368px;
		background: #f2f2f2;
		text-align: left;
		margin: 0px auto;

	  }
	  #hyh-bestup{
		  margin: 0px;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #444444;
	  }
	  #hyh-bestup-down1{
		  margin: 0px ;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down2{
		  margin:0px;
		  padding:0px;
		  height:42px;
		  line-height:42px;
	  }
	  #hyh-bestup-down3{
		  margin: 5px 90px 5px 0px ;
		  padding: 0px;
		  width:180px;
		  height:37px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down1 li,#hyh-bestup-down1 li a{
		  float:left;
		  line-height: 42px;
		  display: block;
		  text-align:center;
		  width:100px;
		  margin-left:140px;
		  padding:0px;
		  font-size:14px;
		  list-style-type: none;
		  text-decoration:none;
		  color:#FFF;
	  }
	  #hyh-bestup-down1 ul li a:hover{
		  color:#a6a6a6;
		  text-decoration:blink;
	  }
	  
	  #clear{
		  width:1368px;
		  height:0px;
		  clear:both;
	  }
	  #footer_line{
		  width:1268px;
		  border: 1px solid #b2b2b2;
		  margin:20px 100px 2px 100px;
		  padding:0px;
		  float:left;
		  clear:both;
	  }
	  #footer{
		  width:1368px;
		  height:12px;
		  margin:5px 100px;
		  float: left;
		  clear: both;
	  }
	  #footer_left{
		  width:230px;
		  height:12px;
		  margin:0px;
		  padding:3px;
		  float:left;
		  clear:both;
	  }
	  #footer_right{
		  width:800px;
		  height:14px;
		  margin:0px;
		  padding:0px;
		  float:left;
	  }
 </style> 


		<script type="text/javascript">

			Cufon.replace('h1',{ textShadow: '1px 1px #D1EF95'});

			

			Cufon.replace('.footer');

		</script>

    </head>

    <body>
    <div id="container">
	<div id="hyh-bestup">
    </div>
    <div id="hyh-bestup-down1">
	<ul>
		<div id="hyh-bestup-down3">
		<li><a href="own.html"><img src="images/hyh_text.png"></a></li>
		</div>
        <div id="hyh-bestup-down2">
		<li><a href="everybody.html">大众登录</a></li>
		<li><a href="#">VIP登录</a></li>
		<li><a href="#">关于我们</a></li>
        </div>
	</ul>
    </div>
   
    


		<div class="wrapper">

		    <div id="content" class="content">

				<div class="item">

					<div class="thumb_wrapper">

						<div class="thumb">

							<ul>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/suancaiyu.png"><img src="images/thumbs/suancaiyu.png" alt="Formstack 1"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/suancaiyu.png"><img src="images/thumbs/suancaiyu.png" alt="Formstack 2"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/suancaiyu.png"><img src="images/thumbs/suancaiyu.png" alt="Formstack 3"/></a></li>

							</ul>

						</div>

						<a class="prev" href="#"></a>

						<a class="next" href="#"></a>

						

					</div>

					<div class="description">

						<h2 >酸菜鱼</h2>

						<p>酸菜鱼是一道源自山城重庆的经典川菜，以其特有的调味和独特的烹调技法而著称，各地也有称之为“酸汤鱼”，主要以鲜草鱼为主料，配以四川泡菜煮制而成，口味酸辣可口。酸菜鱼流行于上世纪90年代，也是重庆江湖菜的开路先锋之一。
                        </p>

                       


					</div>

				</div>
			</div>	

        </div>
				
				

				



				

		

		



		<!-- The JavaScript -->

		<script src="http://www.jq22.com/jquery/jquery-1.6.2.js"></script>

		<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

		<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>

		<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>

		<script type="text/javascript">

			$(function() {

				/*

				fancybox init on each cloud-zoom element

				 */

				$("#content .cloud-zoom").fancybox({

					'transitionIn'	:	'elastic',

					'transitionOut'	:	'none',

					'speedIn'		:	600,

					'speedOut'		:	200,

					'overlayShow'	:	true,

					'overlayColor'	:	'#000',

					'cyclic'		:	true,

					'easingIn'		:	'easeInOutExpo'

				});



				/*

				because the cloud zoom plugin draws a mousetrap

				div on top of the image, the fancybox click needs

				to be changed. What we do here is to trigger the click

				the fancybox expects, when we click the mousetrap div.

				We know the mousetrap div is inserted after

				the <a> we want to click:

				 */

				$("#content .mousetrap").live('click',function(){

					$(this).prev().trigger('click');

				});



				/*

				the content element;

				each list item / group with several images

				 */

				var $content	= $('#content'),

				$thumb_list = $content.find('.thumb > ul');

				/*

				we need to set the width of each ul (sum of the children width);

				we are also defining the click events on the right and left arrows

				of each item.

				 */

				$thumb_list.each(function(){

					var $this_list	= $(this),

					total_w		= 0,

					loaded		= 0,

					//preload all the images first

					$images		= $this_list.find('img'),

					total_images= $images.length;

					$images.each(function(){

						var $img	= $(this);

						$('<img/>').load(function(){

							++loaded;

							if (loaded == total_images){

								$this_list.data('current',0).children().each(function(){

									total_w	+= $(this).width();

								});

								$this_list.css('width', total_w + 'px');



								//next / prev events



								$this_list.parent()

								.siblings('.next')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == $this_list.children().length -1) return false;

									var	next	= ++current,

									ml		= -next * $this_list.children(':first').width();



									$this_list.data('current',next)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								})

								.end()

								.siblings('.prev')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == 0) return false;

									var	prev	= --current,

									ml		= -prev * $this_list.children(':first').width();



									$this_list.data('current',prev)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								});

							}

						}).attr('src',$img.attr('src'));

					});

				});

			});

        </script>

    </body>

</html>